<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>1024</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      background: #000 url(./1024.jpg) no-repeat center;
      background-size: 100% 100%;
    }

    #word {
      width: 100vw;
      height: 100vh;
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.6);
    }

    #img-box {
      width: 100vw;
      height: 100vh;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
    }

    .img-box {
      position: relative;
      float: left;
    }

    .img-opc {
      top: 0;
      left: 0;
      position: absolute;
      z-index: 9999;
      width: 100%;
      height: 100%;
      background-color: #000;
      transition: all 3s linear;
    }

    .shadow {
      font-size: 5rem;
      font-weight: 900;
      color: #000;
      position: relative;
      letter-spacing: 15px;

    }

    .shadow::after {
      content: attr(light);
      position: absolute;
      top: 0;
      left: 0;
      color: transparent;
      clip-path: ellipse(100px 100px at 0% 50%);
      animation: SpotLight 6s infinite;
      background-image: url("./1024.jpg");
      background-size: 100%;
      background-position: center center;
      -webkit-background-clip: text;
      background-clip: text;
    }

    @keyframes SpotLight {
      0% {
        clip-path: ellipse(100px 100px at 0% 50%);
      }

      50% {
        clip-path: ellipse(100px 100px at 100% 50%);
      }

      100% {
        clip-path: ellipse(100px 100px at 0% 50%);
      }
    }

    .go-btn {
      width: 120px;
      margin: 100px auto;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 2px #ccc solid;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <canvas id="canvas"> 您的浏览器不支持canvas标签，请您更换浏览器 </canvas>
  <div id="img-box"></div>
  <div id="word">
    <div class="shadow" style="margin: 80px auto; font-size: 4rem; width: 800px" light="全力以赴 品味人生">全力以赴 品味人生</div>
    <div class="shadow" style="margin: 80px auto; font-size: 3rem; width: 680px" light="全心全意 品质为真">全心全意 品质为真</div>
    <div class="shadow" style="margin: 80px auto; font-size: 1.5rem; width: 480px" light="武汉全品 AI教育中心">武汉全品 AI教育中心</div>
    <div onclick="fullScreen()" class="go-btn">
      点击开启
    </div>
  </div>
  <script>
    let arr = [];
    let timer = null;
    let width = null;
    let height = null;
    let divW = null;
    let divH = null;
    window.onload = function () {
      bgWord();
    };
    function fullScreen() {
      document.querySelector("#canvas").style.display = "none";
      document.querySelector("#word").style.display = "none";
      let el = document.documentElement;
      let rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
      if (rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject !== "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
      setTimeout(function () {
        showDiv();
      });
    }
    function inDiv() {
      if (arr.length === 0) {
        clearInterval(timer);
        return;
      }
      // 获取随机数
      var random = Math.floor(Math.random() * arr.length);
      var id = arr[random];
      var dom = document.querySelector("#opa" + id);
      arr.splice(random, 1);
      var top = dom.getBoundingClientRect().top;
      var left = dom.getBoundingClientRect().left;
      // 插入卡片
      var newDiv = document.createElement("div");
      newDiv.style.position = "absolute";
      var topLeft = [{ top: 400, left: 2500 }, { top: 500, left: -500 }, { top: -1000, left: -1000 }, { top: -1000, left: 3000 }, { top: -1000, left: 8000 }, { top: 1500, left: -1000 }, { top: 1500, left: 6000 }, { top: 1000, left: 2000 }]
      var randam1 = topLeft[Math.floor(Math.random() * 8)];
      newDiv.style.top = `${randam1.top}px`;
      newDiv.style.left = `${randam1.left}px`;
      newDiv.style.zIndex = "10000";
      newDiv.style.transition = "all 1.5s ease";
      newDiv.style.width = divW + "px";
      newDiv.style.height = divH + "px";
      newDiv.style.background = "#ccc url(./1024.jpg) no-repeat";
      newDiv.style.backgroundPosition = `-${left}px -${top}px`;
      document.documentElement.appendChild(newDiv);
      setTimeout(function () {
        newDiv.style.top = top + "px";
        newDiv.style.left = left + "px";
        setTimeout(function () {
          dom.style.display = "none";
          newDiv.style.display = 'none'
        }, 1500);
      }, 10);
    }
    function showDiv() {
      width = window.screen.width;
      height = window.screen.height;
      console.log(width, height);
      divW = width / 20;
      divH = height / 10;
      const imgBox = document.querySelector("#img-box");
      let html = "";
      for (let i = 0; i < 200; i++) {
        arr.push(i);
        html += `<div class="img-box" style="width: ${divW}px; height: ${divH}px"><div id="opa${i}" class="img-opc"></div></div>`;
      }
      imgBox.innerHTML = html;
      timer = setInterval(function () {
        inDiv();
      }, 100);
    }
    function bgWord() {
      var canvas = document.getElementById("canvas");
      var can = canvas.getContext("2d");
      var s = window.screen; //获取屏幕
      var w = (canvas.width = s.width); //获取屏幕宽度
      var h = (canvas.height = s.height); //获取屏幕高度
      var texts = [0, 1];
      can.fillStyle = color1();

      var words = Array(256).join("1").split("");
      //设置一个包含256个空元素的数组，join("1")用来把数组里的元素拼接成字符串，split("")过滤掉数组里的空元素
      setInterval(draw, 50);

      function draw() {
        //can.fillRect()画一个实心矩形:坐标x，坐标y，矩形宽，举行高
        can.fillStyle = "rgba(0,0,0,0.1)";
        can.fillRect(0, 0, w, h);
        can.fillStyle = color1();
        words.map(function (y, n) {
          //	text=String.fromCharCode(Math.ceil(65+Math.random()*57)); //转换为键盘上值
          text = texts[Math.floor(Math.random() * 2)];
          x = n * 10;
          can.fillText(text, x, y);
          words[n] = y > 758 + Math.random() * 484 ? 0 : y + 10;
        }); //数组元素的一个映射
      }

      //获取随机颜色，三种方法
      function color1() {
        var colors = [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          "a",
          "b",
          "c",
          "d",
          "e",
          "f",
        ];
        var color = "";
        for (var i = 0; i < 6; i++) {
          //Math.random()产生一个0-1之间的小数
          var n = Math.ceil(Math.random() * 15);
          color += "" + colors[n];
          // console.log(color);
        }
        return "#" + color;
      }
    }
  </script>
</body>

</html>